<template>
    <div id="app">
<!--        {{shopId}}-->
        <a href="#" id="show" @click="onLoad()">您有优惠劵可领取</a>

        <van-dialog v-model="dialogVisible" :overlay="true" :show-cancel-button="false" style="max-height: 36%!important;overflow: auto">
            <van-list
                    v-model="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="onLoad">
<!--              :title="item.name"  -->
                <van-cell v-for="item in countsName" :key="item.id" >
                    <div class="my-coupon" @click="aaa(item)">
                        <div class="my-coupon__content">
                            <div class="my-coupon__head">
                                <h2 class="my-coupon__amount">
                                    <p v-if="item.value != null"><span>￥</span>{{item.value}}<span>元</span></p>
                                    <span v-if="item.originCondition != null">
                                <span>满</span>{{item.originCondition}}<span>减</span>{{item.denominations}}
                            </span>
                                    <p v-if="item.discount != null"> {{item.discount}} <span>折</span></p>
                                </h2>
                                <p class="my-coupon__condition">{{item.description}}</p>
                            </div>
                            <div class="my-coupon__body">
                                <p class="my-coupon__name">{{item.name}}</p>
                                <p class="my-coupon__valid"> {{item.startTime.split(' ')[0]}}</p>
                                <p class="my-coupon__valid"> {{item.endTime.split(' ')[0]}}</p>
                            </div>
                            <van-button type="warning" size="mini" style="float: right;margin-right: 5px">领取</van-button>
                        </div>
                    </div>
                </van-cell>
            </van-list>
        </van-dialog>
    </div>
</template>
<script>
    export default {
        name: 'showCoupon',
        props: ['shopId'],
        data(){
            return{
                dialogVisible:false,
                countsName:[],
                loading: false,
                finished: false
            }
        },
        // created() {
        //     this.initData(this.shopId);
        // },
        // watch: {
        //     // 监听数据变化
        //     shopId: {
        //         handler: function(o,u) {
        //             console.log('数据更新', o, u)
        //             this.onLoad();
        //         }, deep: true
        //     }
        // },
        methods:{
            onLoad() {
                // 异步更新数据
                // setTimeout 仅做示例，真实场景中一般为 ajax 请求
                setTimeout(() => {
                    this.dialogVisible = !this.dialogVisible
                    this.$http.get('/coupon/web/findByShopId/'+this.shopId).then(resp =>{
                        this.countsName = resp.data.data
                        console.log(this.countsName)
                    })
                    // 加载状态结束
                    this.loading = false;

                    // 数据全部加载完成
                    if (this.countsName.length >= 0) {
                        this.finished = true;
                    }
                }, 1000);
            },
            initData(){
                // zhezhao.style.display = 'block';
                this.dialogVisible = !this.dialogVisible
                this.$http.get('/coupon/web/findByShopId/'+this.shopId).then(resp =>{
                        console.log(resp.data.data)
                        this.countsName = resp.data.data
                    })
                // this.$forceUpdate();
                // var loginBtn = document.querySelector('#show');
                // // 黑色半透明遮罩
                // var loginBox = document.querySelector('zhezhao');
                // // 登录的点击事件
                // loginBtn.onclick = function () {
                //     // 显示遮罩
                //     loginBox.style.display = 'block';
                // }
            },
            aaa(coupon){
                console.log(coupon.id);
                this.$http.get('/coupon/web/couponHistory/toReceiveCoupon/'+coupon.id).then(resp =>{
                        console.log(resp.data.data)
                        if (resp.data.code === 200 ){
                            // this.$message.success(resp.data.data);
                            this.dialogVisible = !this.dialogVisible
                            this.$message({ message: resp.data.data, type: 'success' })
                            this.temp=setInterval(()=>{
                                clearInterval(this.temp)
                                this.dialogVisible = !this.dialogVisible
                            },500);
                            this.initData();
                        }else {
                            this.dialogVisible = !this.dialogVisible
                            this.$message({
                                showClose: true,
                                message: resp.data.msg,
                                type: 'warning'
                            });
                            this.temp=setInterval(()=>{
                                clearInterval(this.temp)
                                this.dialogVisible = !this.dialogVisible
                            },500);
                        }
                    }
                )
            },
            closePopup(){
                this.show = false;
            },
            beforeClose(action, done) {
                if(action === 'confirm') {
                    setTimeout(done, 1000)
                    console.log()
                } else if(action === 'cancel') {
                    done() //关闭
                }
            },
        }
    };
</script>

<style scoped>
    /*将message的提示框位于遮罩层的上方*/
    .mzindex{
        z-index:30 !important;
    }
    .my-coupon{
        /*margin: 0 12px 12px;*/
        overflow: hidden;
        /*background-color: #fff;*/
        border-radius: 8px;
        box-shadow: 0 0 4px rgb(0 0 0 / 10%);
        background-color: #ffff24;
    }
    .my-coupon__content {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        box-sizing: border-box;
        min-height: 84px;
        padding: 14px 0;
        color: #323233;
    }
    .my-coupon--disabled .my-coupon__head {
        color: inherit;
    }
    .my-coupon__amount{
        margin-bottom: 6px;
        font-weight: 500;
        font-size: 30px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .my-coupon__amount span {
        font-weight: 400;
        font-size: 40%;
    }
    .my-coupon__body{
        width: 45%;
    }
    .my-coupon__name{
        margin-bottom: 10px;
        font-weight: 700;
        font-size: 14px;
        line-height: 20px;
    }
    .van-coupon__valid{
        font-size: 12px;
    }
     .my-coupon__head {
         position: relative;
         min-width: 96px;
         padding: 0 8px;
         color: #ee0a24;
         text-align: center;
     }
    .my-coupon__condition{
        font-size: 12px;
        line-height: 16px;
        white-space: pre-wrap;
    }
    .my-coupon__valid{
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    a {
        text-decoration: none;
        color: #fff;
        background: red;
        display: block;
        width: 100%;
        height: 30px;
        line-height: 30px;
        text-align: center;
    }
    #zhezhao {
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        position: fixed;
        left: 0;
        top: 0;
        display: none;
    }
    .content {
        padding-top: 35px;
        width: 80%;
        height: 43%;
        min-height: 20px;
        background: #fff;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        border-radius: 10px;
    }
    .shutDown {
        position: absolute;
        right: 10px;
        top: 0;
        font-size: 30px;
        color: #ccc;
    }
</style>


<!--        <div id="zhezhao">-->
<!--            <div class="content">-->
<!--                <span onclick="zhezhao.style.display = 'none';" class="shutDown">&times;</span>-->
<!--                <div v-for="item in countsName" @click="aaa(item)">-->
<!--                    <div class="my-coupon">-->
<!--                        <div class="my-coupon__content">-->
<!--                            <div class="my-coupon__head">-->
<!--                                <h2 class="my-coupon__amount">-->
<!--                                    <p v-if="item.value != null"><span>￥</span>{{item.value}}<span>元</span></p>-->
<!--                                    <span v-if="item.originCondition != null">-->
<!--                                <span>满</span>{{item.originCondition}}<span>减</span>{{item.denominations}}-->
<!--                            </span>-->
<!--                                    <p v-if="item.discount != null"> {{item.discount}} <span>折</span></p>-->
<!--                                </h2>-->
<!--                                <p class="my-coupon__condition">{{item.description}}</p>-->
<!--                            </div>-->
<!--                            <div class="my-coupon__body">-->
<!--                                <p class="my-coupon__name">{{item.name}}</p>-->
<!--                                <p class="my-coupon__valid"> {{item.startTime.split(' ')[0]}}</p>-->
<!--                                <p class="my-coupon__valid"> {{item.endTime.split(' ')[0]}}</p>-->
<!--                            </div>-->
<!--                            <van-button type="warning" size="mini" style="float: right">待领取</van-button>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
